I am new at Angular2, have some common task to figure out. I am implementing Angular2 project with ASP.NET 5. All my scripts are located in Script directory, then Gulp compiles them into Root of my project next to Index.html. How about components, should they be located in root with ts--> js, html and css together? I am trying to compile with this config but components are not converted. What is wrong?
var gulp = require('gulp');
var typescript = require('gulp-tsc');
gulp.task('default', function () {
// place code for your default task here
});
gulp.task('compile', function () {
gulp.src([
'es6-shim/es6-shim.min.js',
'systemjs/dist/system-polyfills.js',
'systemjs/dist/system.src.js',
'reflect-metadata/Reflect.js',
'rxjs/**',
'zone.js/dist/**',
'core-js/**',
'#angular/**'
], { cwd: "node_modules/**" }) /* Glob required here. */
.pipe(gulp.dest('./wwwroot/node_modules'));
gulp.src('./scripts/systemjs.config.js') /* Glob required here. */
.pipe(gulp.dest('./wwwroot/'));
gulp.src(['src/scripts/*.ts'])
.pipe(typescript())
.pipe(gulp.dest('./wwwroot/app/'));
gulp.src('./scripts/main.ts') /* Glob required here. */
.pipe(typescript())
.pipe(gulp.dest('./wwwroot/app/'));
});
Related
I've got a site with a handful of modules that need their css files to exist separate from one-another, but I'd like to write the styles using scss as well as leverage gulp for autoprefixing. Is it possible to watch for changes in any scss files under a given directory tree and then write the css for the updated file as a sibling? The structure would essentially be something like this (although it could have directories nested to greater depths):
Gulpfile.js
module1
- styles1.scss
- styles1.css
- dir
-- styles2.scss
-- styles2.css
module2
- dir
-- subdir
--- styles3.scss
--- styles3.css
I've got the following Gulpfile setup elsewhere to handle my general scss compilation but I'm not sure how I might modify it to instead handle the above scenario.
// Requirements
var postcss = require('gulp-postcss');
var gulp = require('gulp');
var sass = require('gulp-sass');
var sassGlob = require('gulp-sass-glob');
var sourcemaps = require('gulp-sourcemaps');
var autoprefixer = require('gulp-autoprefixer');
var sassOptions = {
errLogToConsole: true,
outputStyle: 'expanded'
};
gulp.task('scss', function () {
return gulp
.src('scss/style.scss')
.pipe(sourcemaps.init())
.pipe(sassGlob())
.pipe(sass(sassOptions).on('error', sass.logError))
.pipe(postcss([require('postcss-flexibility')]))
.pipe(autoprefixer())
.pipe(sourcemaps.write(''))
.pipe(gulp.dest('css'))
.resume();
});
// Create 'watch' task
gulp.task('watch', function () {
return gulp
// Watch the input folder for change,
// and run `sass` task when something happens
.watch('scss/**/*.scss', gulp.series('scss'))
// When there is a change,
// log a message in the console
.on('change', function (event) {
console.log('File ' + event + ' was updated' + ', running tasks...');
})
;
});
In your scss task, change the gulp.src glob to '**/*.scss', and the gulp.dest glob to '.'.
In your watch task, change the glob to '**/*.scss' as well.
I have a django blog project, which is up and running on a live server.
I am using the TailwindCSS framework, and as part of that I have followed the extensive tutorial on setting up Gulp. I am experimenting with responsive design, but when I add eg:
<div style="flex-wrap justify-end w-full p-6 m-auto border md:bg-blue sm:bg-yellow lg:bg-black>
Only one (sometimes two, but not all three) of the responsive bg elements actually works when I alter the window in Chrome Dev Tools. I have tried clearing my browser cache as I know this sometimes causes problems. This got me thinking that my setup isn't right, and then I realised my understanding of gulp needs to improve.
I have the root static folder as the collection point for my gulp outputs and collectstatic, and the structure of my project is as follows:
nomadpad-
-static
-css
-styles.css
-custom.css
-posts (app)
-static
-css
-styles.css
-custom.css
-src
-css
-styles.css (default tailwind config file)
- ...
.gulpfile:
//Include Gulp
var gulp = require('gulp');
var connect = require('gulp-connect');
var postcss = require('gulp-postcss');
var pug = require('gulp-pug');
var autoprefixer = require('autoprefixer');
//Define base folders
var src = '/src/';
var dest = '/static/';
var posts = '/posts/static/';
// Include plugins
var plugins = require("gulp-load-plugins")({
pattern: ['gulp-*', 'gulp.*', 'main-bower-files'],
replaceString: /\bgulp[\-.]/
});
// Concatenate & Minify JS
gulp.task('scripts', function() {
var jsFiles = [posts + 'js/*'];
//plugins.mainBowerFiles() returns an array of all the main
//files from the packages and
//plugins.filter('*.js') uses gulp-filter to pass only JS files.
gulp.src(plugins.mainBowerFiles().concat(jsFiles))
.pipe(plugins.filter('*.js'))
.pipe(plugins.concat('main.js'))
.pipe(plugins.uglify())
.pipe(gulp.dest(dest + 'js'));
});
//Compile CSS
gulp.task('css', function() {
var cssFiles = [posts +'css/*'];
gulp.src(plugins.mainBowerFiles().concat(cssFiles))
.pipe(plugins.filter('*.css'))
.pipe(plugins.concat('main.css'))
.pipe(plugins.uglify())
.pipe(gulp.dest(dest + 'css'));
});
// Compile tailwind
gulp.task('tailwind', function () {
var postcss = require('gulp-postcss');
var tailwindcss = require('tailwindcss');
return gulp.src(posts + 'css/*')
.pipe(postcss([
tailwindcss('tailwind.js'),
require('autoprefixer'),
]))
.pipe(gulp.dest(dest + 'css/*'))
.pipe(connect.reload())
});
gulp.task('html', function() {
gulp.src('./templates/posts/*.html')
.pipe(pug())
.pipe(gulp.dest(dest + 'html'))
});
// Watch for changes in files
gulp.task('watch', function() {
gulp.watch(dest + 'css/*', ['css']);
gulp.watch(dest + 'html/*', ['html']);
gulp.watch(dest + 'js/*', ['scripts']);
});
gulp.task('connect', function() {
connect.server({
root: 'build',
livereload: true,
open: true
});
});
// Default Task
gulp.task('default', ['css', 'tailwind', 'html', 'scripts']);
gulp.task('start', ['connect', 'watch']);
I appreciate the layout of this file and my structure is a little messy.
Without calling "gulp" in the command line, my Tailwind styles mostly work fine. My questions are:
When I call gulp, why is there no output in my static folders? What changes need to be made to ensure this works? Eg: My django templates should be being pulled through the html pipe.
When I call collectstatic, this updates the css files in /static (hence the two CSS files in the root static. What is the difference between using gulp and collectstatic, and how do I use them together?
At what point should I be using gulp and gulp start? I feel like I have put a lot of effort in to implementing this, but it is just wasted on me :-(
Are the issues I'm having with TailwindCSS responsive attributes related to my gulp set-up or lack of usage of gulp?
Many thanks,
David
i hope you solved this incase u did not i would recommend you use this package to easily integrate tailwind css with Django check it out here https://github.com/timonweb/django-tailwind
I am trying to migrate a project to gulp-sass workflow. After reading some tutorials online, I have setup a very basic gulpfile:
var gulp = require('gulp'),
sass = require('gulp-sass'),
concat = require('gulp-concat');
gulp.task('styles', function() {
return gulp.src('scss/*.scss')
.pipe(sass({
'sourcemap=none': true
}))
.pipe(gulp.dest('css/'))
});
gulp.task('watch', function() {
gulp.watch('scss/**/*.scss', ['styles']);
});
I want to generate a *.css file from every *.scss file that doesn't begin with underscore.
My problem: with current gulpfile, gulp will detect changes on .scss files and rebuild ALL libraries, instead of building only the ones which have been affected by the change.
For example, I have 2 libs on my project:
lib1, which #imports partials p1 and p2
lib2, which #imports partials p2 and p3
If I edit partial p1, I want only lib1 to be updated.
If I edit partial p3, I want only lib2 to be updated.
If I edit partial p2, I want both lib1 and lib2 to be updated.
Current setup updates both libs on every edit that I make in any of the *.scss sources.
In other words, I would like gulp-sass to behave the same way as sass --watch does. Is this possible? How?
thanks!
Currently you're targeting all scss files in your watch task:
gulp.watch('scss/**/*.scss', ['styles']);
You can narrow it down to a subfolder or to specific files. You can breakdown your watch task into 2 parts, for example:
gulp.watch('scss/p1/**/*.scss', ['stylesP1', 'stylesP2']);
gulp.watch('scss/p2/**/*.scss', ['stylesP2', 'stylesP3']);
And then create 2 style tasks to match:
gulp.task('stylesP1', function() { /* Your task actions */ });
gulp.task('stylesP2', function() { /* Your task actions */ });
gulp.task('stylesP3', function() { /* Your task actions */ });
I have the need to compile a SASS file to a CSS file when saved, without having to compile every SASS file to a single CSS file.
I need the ability to:
- Run a 'watch' on a directory
- If a file is saved, a CSS of it's name is created. Example: 'main.scss' compiles to 'main.css'.
- It should not compile every single SASS if it doesn't need to.
The goal is to optimize the development process to avoid compiling every single SASS file in a directory when 'watching'.
My current SASS task looks a bit like this and results in a single CSS file:
//Compile Sass
gulp.task('styles', function() {
return gulp.src('app/scss/styles.scss')
.pipe(plugins.sass({ includePaths : [paths.sass], style: 'compressed'})
.pipe(plugins.autoprefixer('last 2 version'))
.pipe(plugins.rename({suffix: '.min'}))
.pipe(plugins.minifyCss())
.pipe(gulp.dest('build/css'));
});
Looks like gulp-changed is what you're looking for:
https://github.com/sindresorhus/gulp-changed
You add it as a dependency with npm install --save-dev gulp-changed and plug it into your gulpfile. From the gulp-changed ReadMe:
var gulp = require('gulp');
var changed = require('gulp-changed');
var ngAnnotate = require('gulp-ng-annotate'); // just as an example
var SRC = 'src/*.js';
var DEST = 'dist';
gulp.task('default', function () {
return gulp.src(SRC)
.pipe(changed(DEST))
// ngAnnotate will only get the files that
// changed since the last time it was run
.pipe(ngAnnotate())
.pipe(gulp.dest(DEST));
});
I want to switch from less to sass so I installed gulp-sass with npm and modified my gulpfile to compile sass instead of less (nothing else changed). Sadly gulp doesn't compile my .scss file to css and after googling and trying all i could think of it still doesn't compile. Here are all the informations I can show you:
gulpfile.js
// GULP CONFIG
// REQUIRES
// general
var gulp = require('gulp');
// css
var sass = require('gulp-sass');
var minifycss = require('gulp-minify-css');
var autoprefixer = require('gulp-autoprefixer');
var rename = require("gulp-rename");
// watch
var watch = require('gulp-watch');
// TASKS
// css
gulp.task('css', function() {
gulp.src('style.css') // get the 'all-import' css-file
// .pipe(sass({includePaths: ['./styles']}))
// .pipe(sass().on('error', sass.logError))
.pipe(sass()) // sass to css
.pipe(autoprefixer('last 2 version', { cascade: false })) // autoprefix
.pipe(minifycss()) // minify
.pipe(rename('style.min.css')) // rename to style.min.css
.pipe(gulp.dest('')); // output to root
});
// watch
gulp.task('watch', function() {
gulp.watch('styles/*', ['css']);
});
// RUN DEFAULT
gulp.task('default', ['watch']);
related Folders & Files
├── style.min.css
├── style.css (with #import styles/style.scss)
│ └── styles
│ ├── style.scss
terminal response:
starting gulp:
[10:19:14] Starting 'watch'...
[10:19:14] Finished 'watch' after 11 ms
[10:19:14] Starting 'default'...
[10:19:14] Finished 'default' after 20 μs
after saving style.scss
[10:19:20] Starting 'css'...
[10:19:20] Finished 'css' after 15 ms
style.scss (content on purpose of testing obviously)
$color: #99cc00;
body {
background-color: $color;
.sub {
color: $color;
}
}
style.min.css after running through gulp
$color:#9c0;body{background-color:$color;.sub{color:$color}
You are not telling gulp to watch for sass file. On this line:
gulp.src('style.css')
You are specifying a css file, not a scss file. Change it to :
gulp.src('style.scss') // update, s missing
Also, there is no output route specified. This line:
.pipe(gulp.dest(''));
Should contain your destiny route, and its currently empty.
So, for the root route, something like this should work:
.pipe(gulp.dest('./')); // or whatever route you want
Anyway, your file structure is a bit weird.
In my opinion, you should create different folders for sass files and compiled ones.
Hope this puts you on the right track.